<template>
  <div class="filter">
    <el-radio-group v-model="timeType" size="mini">
      <el-radio-button label="day">今日</el-radio-button>
      <el-radio-button label="week">本周</el-radio-button>
      <el-radio-button label="month">本月</el-radio-button>
      <el-radio-button label="year">本年</el-radio-button>
    </el-radio-group>

    <el-date-picker
      v-model="dates"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="mini"
      style="margin-left: 10px"
    >
    </el-date-picker>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'chart-filter',
  setup () {
    const timeType = ref<string>('year')
    const dates = ref<Date[]>([
      dayjs().startOf('year').toDate(),
      dayjs().endOf('year').toDate()
    ])

    watch(timeType, () => {
      switch (timeType.value) {
        case 'day':
          dates.value[0] = dayjs().startOf('date').toDate()
          dates.value[1] = dayjs().endOf('date').toDate()
          break
        case 'week':
          dates.value[0] = dayjs().startOf('week').add(1, 'day').toDate()
          dates.value[1] = dayjs().endOf('week').toDate()
          break
        default:
          dates.value[0] = dayjs().startOf(timeType.value as any).toDate()
          dates.value[1] = dayjs().endOf(timeType.value as any).toDate()
          break
      }
    })

    return {
      timeType,
      dates
    }
  }
})
</script>

<style scoped lang="scss">
.filter {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
}
</style>
